@import "~antd-mobile/dist/antd-mobile.less";

.page {
  width: 100%;
  margin: 0 auto;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}

.scan {
  display: inline-block;
  text-align: center;
  width: 196px;
  margin-left: 10px;
  padding-left: 15px;
  position: relative;

  h1 {
    margin-top: 0;
    font-size: 16px;
  }

  .innerBox {
    // display: inline-block;
    width: 128px;
    height: 128px;
    margin: 0 auto;

    .icon {
      display: inline-block;
      width: 128px;
      height: 128px;
      background-image: url(../../assets/scan.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
  }

  p {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    padding-left: 45px;
    padding-right: 30px;
    font-size: 10px;
  }
}

.separator {
  display: inline-block;
  width: 1PX;
  height: 210px;
  background-color: #ccc;
}

.form {
  display: inline-block;
  margin-left: 30px;
  min-width: 330px;

  .label {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .control {
    display: flex;
    margin-bottom: 12px;
    border: 1px solid #d8d8d8;

    .prefix {
      position: relative;
      display: inline-block;
      width: 45px;
      height: 45px;

      &:before {
        content: '';
        position: absolute;
        top: 11px;
        left: 9px;
        width: 25px;
        height: 25px;
        background-image: url(../../assets/Phone.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
      }

      &:after {
        content: '';
        position: absolute;
        right: 2px;
        width: 0.01rem;
        top: 12px;
        height: 25px;
        background-color: #999;
      }
    }

    & > div {
      flex: 1;
      height: 45px;

      .input {
        height: 45px;
        min-height: initial;
        padding-left: 15px;
        line-height: 1;

        :global {
          .am-list-line {
            padding-right: 15px;
          }

          .am-input-clear,
          .am-input-error-extra {
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
            background-size: .30rem;
          }
          .am-input-clear {
            background-position: 0.03rem 0.03rem;
          }
        }

        input {
          font-size: 16px;
          font-weight: 600;
          color: #222;
          line-height: 45px;
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }
  }

  .square {
    position: relative;
    width: 100%;
    height: 0;

    .square-inner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      li {
        width: calc(98% / 3);  /* calc里面的运算符两边要空格 */
        height: 35px;
        line-height: 35px;
        margin-right: 1%;
        margin-bottom: 1%;
        background-color: #fefefe;
        overflow: hidden;
        flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        // button style
        outline: 0 none;
        -webkit-appearance: none;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        white-space: nowrap;
        border: 1PX solid #ddd;
        border-radius: 5PX;

        &:nth-of-type(3n) { /* 选择个数是3的倍数的元素 */
          margin-right: 0;
        }

        &:nth-of-type(n + 10) { /* 选择倒数的三个元素，n可以取0 */
          margin-bottom: 0;
        }

        &:nth-of-type(n + 12) {
          background-color: @brand-primary;
          color: #fff;
        }

        .icon {
          width: 25px;
          height: 100%;
        }

        &:active,
        &:hover {
          color: #fff;
          background-color: #ddd;// @brand-primary-tap;
          border-color: #ddd;
        }
      }
    }
  }
}

